<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>退款管理</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .my-refund-list{
            width: 90%;
            height: auto;
            margin: auto;
        }
        .refund-left{
            width: 50%;
            height: 0.8rem;
            float: left;
        }
        .refund-right{
            width: 40%;
            height: 0.8rem;
            float: right;
        }
        .my-refund-ul{font-size: 0.28rem;padding: 0.3rem 0 0 0;
            overflow: hidden;border-bottom: 1px solid #e3e3e3;}
        .my-refund-ul li{line-height: 0.8rem;    display: block;overflow: hidden;}
        .showDetail{
            float:right;font-size: 0.3rem;color: #FA8072;
        }
        .all-refund-list{
            height: 1rem;
            width: 100%;
            border-bottom: 1px solid #e3e3e3;
        }
        .all-refundBtn{
            outline: none;
            font-size: 0.3rem;
            padding-left: 0.4rem;
            text-align: center;
            float: left;
            line-height: 1rem;
            width: 20%;
            background-color: white;
            height: 100%;
            border: none;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            background-image: url(./img/bottomIcon.jpg);
            background-repeat: no-repeat;
            background-position: right;
            background-size: 0.2rem;
        }
        .refund-ul{width: 78%;float: right;background-color: white;
        font-size: 0.3rem}
        .refund-ul li{float: left;
            line-height: 1rem;
            width: 24.6%;
            text-align: center;}
        .li-line{
            width: 1px;
            height: 0.5rem;
            background-color: #e3e3e3;
            float: left;
            margin-top: 0.25rem;
        }
        .refund-right span:last-child{
            color: #666;
        }
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>退款管理</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="all-refund-list">
        <select class="all-refundBtn">
            <option>全部</option>
        </select>
        <ul class="refund-ul">
            <li>待处理</li>
            <span class="li-line"></span>
            <li>客服介入</li>
            <span class="li-line"></span>
            <li>退款成功</li>
            <span class="li-line"></span>
            <li>退款失败</li>
        </ul>
    </div>
    <div class="my-refund-list">

        <ul class="my-refund-ul">
            <li>
                <div class="refund-left">
                    <span style="float: left">订单号</span>
                    <span style="float: right;color: #666">P123123123123</span>
                </div>
                <div class="refund-right">
                    <span style="float: left">退款状态</span>
                    <span style="float: right;color: #FA8072">退款成功</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left;color: #666">家具类 | 送货到家并安装</span>
                </div>
                <div class="refund-right">
                    <span style="float:left;">商户名称</span>
                    <span style="float:right;">盼盼木门</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left">交易金额</span>
                    <span style="float: right;color: #666">60.00</span>
                </div>
                <div class="refund-right">
                    <span style="float: left">退款金额</span>
                    <span style="float: right;color:#666">60.00</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left">申请时间</span>
                    <span style="float: right;color: #666">2017.02.02 20:20</span>
                </div>
                <div class="refund-right">
                </div>
            </li>
            <li>
                <div class="refund-left"></div>
                <div class="refund-right">
                    <a href="#" class="showDetail">查看详情</a>
                </div>
            </li>
        </ul>
        <ul class="my-refund-ul">
            <li>
                <div class="refund-left">
                    <span style="float: left">订单号</span>
                    <span style="float: right;color: #666">P123123123123</span>
                </div>
                <div class="refund-right">
                    <span style="float: left">退款状态</span>
                    <span style="float: right;color: #FA8072">待处理</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left;color: #666">家具类 | 送货到家并安装</span>
                </div>
                <div class="refund-right">
                    <span style="float:left;">商户名称</span>
                    <span style="float:right;">盼盼木门</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left">交易金额</span>
                    <span style="float: right;color: #666">60.00</span>
                </div>
                <div class="refund-right">
                    <span style="float: left">退款金额</span>
                    <span style="float: right;color:#666">60.00</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left">申请时间</span>
                    <span style="float: right;color: #666">2017.02.02 20:20</span>
                </div>
                <div class="refund-right">
                </div>
            </li>
            <li>
                <div class="refund-left"></div>
                <div class="refund-right">
                    <a href="#" class="showDetail">查看详情</a>
                </div>
            </li>
        </ul>
        <ul class="my-refund-ul">
            <li>
                <div class="refund-left">
                    <span style="float: left">订单号</span>
                    <span style="float: right;color: #666">P123123123123</span>
                </div>
                <div class="refund-right">
                    <span style="float: left">退款状态</span>
                    <span style="float: right;color: #FA8072">退款成功</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left;color: #666">家具类 | 送货到家并安装</span>
                </div>
                <div class="refund-right">
                    <span style="float:left;">商户名称</span>
                    <span style="float:right;">盼盼木门</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left">交易金额</span>
                    <span style="float: right;color: #666">60.00</span>
                </div>
                <div class="refund-right">
                    <span style="float: left">退款金额</span>
                    <span style="float: right;color:#666">60.00</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left">申请时间</span>
                    <span style="float: right;color: #666">2017.02.02 20:20</span>
                </div>
                <div class="refund-right">
                </div>
            </li>
            <li>
                <div class="refund-left"></div>
                <div class="refund-right">
                    <a href="#" class="showDetail">查看详情</a>
                </div>
            </li>
        </ul>
        <ul class="my-refund-ul">
            <li>
                <div class="refund-left">
                    <span style="float: left">订单号</span>
                    <span style="float: right;color: #666">P123123123123</span>
                </div>
                <div class="refund-right">
                    <span style="float: left">退款状态</span>
                    <span style="float: right;color: #FA8072">退款失败</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left;color: #666">家具类 | 送货到家并安装</span>
                </div>
                <div class="refund-right">
                    <span style="float:left;">商户名称</span>
                    <span style="float:right;">盼盼木门</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left">交易金额</span>
                    <span style="float: right;color: #666">60.00</span>
                </div>
                <div class="refund-right">
                    <span style="float: left">退款金额</span>
                    <span style="float: right;color:#666">60.00</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left">申请时间</span>
                    <span style="float: right;color: #666">2017.02.02 20:20</span>
                </div>
                <div class="refund-right">
                </div>
            </li>
            <li>
                <div class="refund-left"></div>
                <div class="refund-right">
                    <a href="#" class="showDetail">查看详情</a>
                </div>
            </li>
        </ul>
        <ul class="my-refund-ul">
            <li>
                <div class="refund-left">
                    <span style="float: left">订单号</span>
                    <span style="float: right;color: #666">P123123123123</span>
                </div>
                <div class="refund-right">
                    <span style="float: left">退款状态</span>
                    <span style="float: right;color: #FA8072">客服介入</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left;color: #666">家具类 | 送货到家并安装</span>
                </div>
                <div class="refund-right">
                    <span style="float:left;">商户名称</span>
                    <span style="float:right;">盼盼木门</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left">交易金额</span>
                    <span style="float: right;color: #666">60.00</span>
                </div>
                <div class="refund-right">
                    <span style="float: left">退款金额</span>
                    <span style="float: right;color:#666">60.00</span>
                </div>
            </li>
            <li>
                <div class="refund-left">
                    <span style="float: left">申请时间</span>
                    <span style="float: right;color: #666">2017.02.02 20:20</span>
                </div>
                <div class="refund-right">
                </div>
            </li>
            <li>
                <div class="refund-left"></div>
                <div class="refund-right">
                    <a href="#" class="showDetail">查看详情</a>
                </div>
            </li>
        </ul>

    </div>
</div>
</body>
</html>